<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Wireless Positioning</title>
		<script type="text/javascript" src="/media_test/jquery.min.js"></script>
		<script type="text/javascript" src="/media_test/excanvas.js"></script> 
		<style>
			body {
				font-family:Arial;
			}
			h4 {
				font-size:15px;
				color: red;
				margin: 0px;
			}
			#map {
				float:left;
			}
			#choice {
				float:left;
				font-size:14px;
				margin-top: -50px;
				padding-left: 20px;
			}
			#choice fieldset{
				padding: 10px;
				margin: 10px 0px 10px 0px;
			}		
		</style>
	</head> 
	<body>
		<h2>Wi-Fi Location and Tracking System</h2>
		<div id = "info">
			<h4>
				We use the algorithm : {{algorithm}} 
				{% if use_fuzzy %}
				and the Fuzzy Algorithm will be used.
				{% endif %}
			</h4>
			{% if show_track %}
			<h4>The Tracking is on</h4>
			{% endif %}
		</div>
		<div id = "map" style="width: 800px; height: 500px">
			<canvas id="canvas"></canvas>
		</div>
			<script type="text/javascript">
				var mt = {{mt}};
				var field_id = {{field_id}};
				
				function transfer_x(x){	
					if (field_id == 0)
						return 800 - x*mt;
					else
						return 50 + x*mt;
				}
				function transfer_y(y){
					if(field_id == 0)
						return y*mt;
					else
						return 800 - y*mt;
				}
				
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext('2d');
				canvas.setAttribute('width', 800);
				canvas.setAttribute('height', 800);
				// draw MAP from building points data
				$.getJSON("/wp/data/{{field_id}}/?cat=bp", function(data) { // the field_id get the hash of the building
					$.each(data, function() {
						ps = this.fields.points.split(';');
						c = this.fields.color;
						if (c == 1)
							context.fillStyle = 'rgba(200, 200, 0, 0.5)';
						else if(c == 2)
							context.fillStyle = 'rgba(200, 0, 0, 0.3)';
						else if(c == 3)
							context.fillStyle = 'rgba(0, 200, 0, 0.3)';
						else if(c == 4)
							context.fillStyle = 'rgba(0, 0, 200, 0.2)';
						else
							context.fillStyle = 'rgba(0, 0, 200, 0.5)';
						context.strokeStyle = '#000';
						context.lineWidth = 1; 
						context.beginPath();
						for (i = 0; i < ps.length; i++) {
							p = ps[i];
							t = p.split(',');
							t[0] = transfer_x(parseInt(t[0])); // unit of mm
							t[1] = transfer_y(parseInt(t[1]));
							if (i == 0)
								context.moveTo(t[0], t[1]);
							else
								context.lineTo(t[0], t[1]);
						}
						context.closePath();
						context.fill();
						//if (c==1)
							context.stroke();
					});
				});
				
				{% if show_sample %}
				$.getJSON("/wp/data/{{field_id}}/?cat=sample", function(data) {
					$.each(data, function(){
						dx = transfer_x(this.fields.x);
						dy = transfer_y(this.fields.y);
						img = new Image(); 
						img.src = "/media_test/img/sp_8.png"
						context.drawImage(img, dx-4, dy-4);
					});
				});
				{% endif %}
				
				{% if show_ap %}
				$.getJSON("/wp/data/{{field_id}}/?cat=ap", function(data){
					$.each(data, function(){
						dx = transfer_x(this.fields.x);
						dy = transfer_y(this.fields.y);
						img = new Image(); 
						img.src = "/media_test/img/ap_24.png";
						context.drawImage(img, dx-12, dy-12);
					});
				});
				{% endif %}
				
				function getTrack(){
					{% if show_track %}
					$.getJSON("/wp/data/{{field_id}}/?cat=track&session_id={{session_id}}", function(data){
						context.strokeStyle = '#fa0032';
						context.lineWidth = 2; 
						context.beginPath();
						$.each(data, function(){
							//alert(this.fields.count);
							dx = transfer_x(this.fields.x);
							dy = transfer_y(this.fields.y);
							if (this.fields.count == 1)
								context.moveTo(dx, dy);
							else
								context.lineTo(dx, dy);
							//img = new Image(); 
							//img.src = "/media_test/img/u_16.png";
							//context.drawImage(img, dx, dy);
						});
						
						context.stroke();
						context.closePath();
						//setTimeout("getTrack()", 2000);
					});
					{% endif %}
				}	
				
				function getLoc(){
					{% if show_user %}
					$.getJSON("/wp/data/{{field_id}}/?cat=user", function(location){
						x = transfer_x(location.x);
						y = transfer_y(location.y);
						img = new Image();
						img.src = "/media_test/img/u_32.png";
						context.drawImage(img, x-16, y-16);
						//setTimeout("getLoc()", 2000);
					});
					{% endif %}
				}
				
				//setTimeout("getTrack()", 2000);
				//setTimeout("getLoc()", 2000);
				getTrack();
				getLoc();
				
				context.fillStyle = '#00f';
				context.lineWidth = 1;
			</script>
		<div id="choice">
			<form name="wp" action="" method="POST">
			<h3>Make Your Decision</h3>
			<fieldset>
				<legend>Choose The Algorithm Type</legend>
					<input type="radio" name="algorithm" value="Strongest"/>
					<label>Strongest AP</label><br>
					<input type="radio" name="algorithm" value="ThreePoint" />
					<label>Three Point</label><br>
					<input type="radio" name="algorithm" value="FingerPrint" />
					<label>Finger Print</label><br> 
					<input type="radio" name="algorithm" value="Hybrid" />
					<label>Hybrid</label><br>
			</fieldset>
			<fieldset>
				<legend>Optional</legend>
					<input type="checkbox" name="fuzzy" value="fuzzy" />
					<label>Fuzzy Alogrithm</label><br>
					<input type="checkbox" name="track" value="show" />
					<label>Show User's Track</label><br>
			</fieldset>
				<input type="submit" name="submit" value="submit" />
			</form>
		</div>
	</body>
</html>